<template>
	<view class="movie">
		<view class="header">
			<view class="header-con" :style="{paddingTop: systemBarHeight + 'px'}">
				<view class="title">观影剧场</view>
			</view>
		</view>
		<view class="name">
			<view>1、抓娃娃</view>
			<button class="pay" @click="pay">购买</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onMounted,
		reactive,
		toRefs
	} from "vue";

	import {
		onLoad
	} from "@dcloudio/uni-app"

	interface dataType {
		systemBarHeight : number;
	}
	
	// 声明变量集合
	const data: dataType = reactive({
		systemBarHeight: 0
	})

	const {
		systemBarHeight
	} = toRefs(data)

	onLoad(() => {

	})

	onMounted(() => {
		getSysteminfo()
	})
	const getSysteminfo = () => {
		uni.getSystemInfo({
			success: res => {
				data.systemBarHeight = res.statusBarHeight;
			}
		});
	}
	// 购买
	const pay = () => {
		// 跳转
		uni.navigateTo({
			url: '/pages/buyTickets/index'
		})
	}
</script>

<style>
	.movie {
		width: 100%;
	}

	.header {
		color: #fff;
		position: relative;
		padding: 36.5rpx 0;
	}

	.header-con {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.name {
		color: #fff;
		padding: 18.25rpx 36.5rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pay {
		margin: unset;
		padding: 18.25rpx;
		font-size: 23.72rpx;
		line-height: unset;
	}
</style>